import { Share2 } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function RecipeCard() {
  return (
    <div className="bg-white rounded-2xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
      <div className="max-w-2xl mx-auto p-12">
        {/* Header with Share Button */}
        <div className="relative animate-fade-in mb-12">
          <div className="absolute right-0 top-0">
            <Button
              variant="ghost"
              size="sm"
              className="text-gray-400 hover:text-gray-600 hover:bg-gray-50"
              onClick={() => {
                navigator.clipboard.writeText(window.location.href)
              }}
            >
              <Share2 className="w-4 h-4 mr-1" />
              <span className="text-sm">分享配方</span>
            </Button>
          </div>
          <div>
            <p className="text-sm text-gray-500 mb-8">经典调酒 / 调酒师推荐</p>
            <h2 className="text-6xl font-serif tracking-wide">Whisky Float</h2>
            <h3 className="text-4xl mt-3">威士忌悬浮</h3>
          </div>
          <div className="h-px bg-black w-full mt-8" />
        </div>

        {/* Ingredients */}
        <div className="mb-12 animate-fade-in-delayed">
          <h4 className="text-3xl font-serif italic mb-8">Ingredients</h4>
          <div className="flex gap-4">
            <div className="flex-1 group">
              <div className="bg-emerald-600 text-white py-2 px-4 rounded transition-transform duration-300 group-hover:scale-[1.02] text-center text-sm w-full">
                Green Label Whisky proper
              </div>
              <div className="mt-3 flex flex-col text-sm space-y-0.5">
                <span>绿方威士忌</span>
                <span>适量</span>
              </div>
            </div>
            <div className="flex-1 group">
              <div className="bg-sky-400 text-white py-2 px-4 rounded transition-transform duration-300 group-hover:scale-[1.02] text-center text-sm w-full">
                Water 70% of your Glass
              </div>
              <div className="mt-3 flex flex-col text-sm space-y-0.5">
                <span>水</span>
                <span>7分满</span>
              </div>
            </div>
          </div>
        </div>

        <div className="h-px bg-black w-full mb-12" />

        {/* Method */}
        <div className="animate-fade-in-delayed">
          <h4 className="text-3xl font-serif italic mb-8">Method</h4>
          <ol className="space-y-6">
            <li className="flex items-start gap-6 group">
              <span className="flex-shrink-0 w-10 h-10 rounded-full bg-black text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110 text-lg">
                1
              </span>
              <div className="inline-flex flex-col">
                <span className="text-xl pb-3">杯中加入水 Water 7分满</span>
                <div className="h-0.5 bg-sky-400 transform origin-left transition-transform duration-300 group-hover:scale-x-105" />
              </div>
            </li>
            <li className="flex items-start gap-6 group">
              <span className="flex-shrink-0 w-10 h-10 rounded-full bg-black text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110 text-lg">
                2
              </span>
              <div className="inline-flex flex-col">
                <span className="text-xl pb-3">加入绿方威士忌 适量</span>
                <div className="h-0.5 bg-emerald-600 transform origin-left transition-transform duration-300 group-hover:scale-x-105" />
              </div>
            </li>
          </ol>
        </div>

        {/* Footer */}
        <div className="pt-12 text-sm text-gray-400 animate-fade-in-delayed">Generated by ByteSlinger AI Bartender</div>
      </div>
    </div>
  )
}

